<%@page import="java.util.HashMap"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>IEPM - Industry's Opinion Chart</title>
        <%@include file = "global/admin_include.jsp" %>
        <%

            HashMap am = new HashMap();
            Object obj = request.getSession().getAttribute("accessMap");
            if (obj == null) {
                response.sendRedirect("../admin.jsp");
            } else {
                am = (HashMap) obj;
                if (am.get("P").equals("false")) {
                    response.sendRedirect("accessDenied.jsp");
                }
            }
        %>
        <script type="text/javascript">
            var chart1; 

            $(document).ready(function(){   
                makeChart();
            });
            
            function makeChart() {   
                $.ajax({
                    type: "POST",
                    url: "../ChartServlet",
                    data: "action=getIndustry",
                    dataType: "json",
                    cache: false,
                    success: function(data){
                        var jsonLen = data.length;
                        var i = 0;
                        for(i=0;i<jsonLen;i++) {
                            var chartnumber = 'chart'+i;
                            chartnumber = chartnumber.toString();
                            firmChart(data[i],chartnumber,i);
                        }   
                    }
                });      
            }
            
            function firmChart(chartname,chartnumber,colorNo) {
                var series1 = [];
                var categories = [];
                var rank = [];
                var yAxis = [];
                var industryName = chartname;
                var acceptableResponses = 0;
                         
                $.ajax({
                    type: "POST",
                    url: "../ChartServlet",
                    data: "action=getChartValue&content=Industry&industryName="+industryName,
                    dataType: "json",
                    cache: false,
                    success: function(data){           
                        categories = data.categories;
                        rank = data.rank;
                        acceptableResponses = data.acceptableResponses;
                        yAxis = data.yAxis;
                        chartname = chartname+"<br/>[Total Acceptable Responses: "+acceptableResponses+"]";
                        
                        var i = 0;
                        for(i=0;i<categories.length;i++) {
                            categories[i] =  categories[i]+" : #"+rank[i];
                        } 
                        
                        series1 = data.series;
                        var j = 0;
                        for(j=0;j<series1.length;j++) {
                            if(series1[j] == 0) {
                                series1[j]="";//if original value is 0 (which is impossible since value starts from 1), set it to empty string.
                            }
                        }
                        drawChart(series1,categories,chartname,chartnumber,colorNo,acceptableResponses);
                    }
                }); 
            }

            function drawChart(series1,categories,chartname,chartnumber,colorNo,acceptableResponses) {
                var colorList = ['#058DC7', '#ED561B', '#50B432', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
                var series = [{
                        data: series1,
                        name: 'Others',
                        color: colorList[colorNo]}]
                
                chart1 = new Highcharts.Chart({
                    chart: {
                        renderTo: chartnumber,
                        defaultSeriesType: 'bar',
                        marginRight: 100,
                        events:{load: function(){}}
                    },
                    credits: {enabled: false},
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true,
                                formatter: function(){
                                    if(acceptableResponses<=0) {
                                        return "N.A.";
                                    } else {
                                        if(this.y>=0) {
                                            return (this.y).toFixed(2);
                                        } else {
                                            return "N.A.";//possible reason is null value
                                        }                              
                                    }
                                }
                            }
                        }
                    },
                    title: {text: chartname},
                    xAxis: {categories: categories},
                    yAxis: {
                        allowDecimals: false,
                        min: 0.00,
                        max: 5.00,
                        title: {text: ''}
                    },
                    tooltip: {
                        enabled: false,
                        formatter: function() {
                            return '<span style="font-size:0.9em;color:#666666;">'+ this.series.name +'</span><br/>score of <p style="color:' + this.series.color + '">' + (this.y).toFixed(2) + ' in ' + this.x + '</p>';
                        },
                        style: {}
                    },
                    legend: {
                        style: {
                            left: 'auto',
                            bottom: 'auto',
                            right: '70px',
                            top: '35px'
                        },
                        backgroundColor: '#FFFFFF',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false,
                        enabled: false
                    },
                    series: series
                });
            }
        </script>
    </head>
    <body>
        <div style="padding:3px 2px;border-bottom:1px solid #ccc"><h2>Industry's Opinion</h2></div> 
        <br/>
        <div id="chart0" style="width: 800px; height: 400px; margin: 0 auto"></div><br/><br/>
        <div id="chart1" style="width: 800px; height: 400px; margin: 0 auto"></div><br/><br/>
        <div id="chart2" style="width: 800px; height: 400px; margin: 0 auto"></div><br/><br/>
        <br/>
    </body>
</html>